<style lang="stylus" scoped>
@import '../common/stylus/index.styl'
  .food
    width 100%
    .iconfont
      position absolute
      display inline-block
      height 25px
      height 25px
      top 10px
      left 10px
      font-size 25px
      z-index 1
    .foodin
      position absolute
      top 0
      bottom 45px
      width 100%
      overflow hidden
      overflow-y auto
    .car
      position absolute
      bottom 0
    .img
      width 100%
      height 375px
    .title
      margin 18px
      position relative
      .name
        font-size 14px
        font-weight 700
        color rgb(7,17,27)
        line-height 14px
        margin-bottom 8px
      .rating
        font-size 10px
        color rgb(147,153,159)
        line-height 10px
        margin-bottom 18px
        span:first-of-type
          margin-right 12px
      .price
        line-height 24px
        .new
          font-size 14px
          font-weight 700
          color rgb(240,20,20)
        .old
          font-size 10px
          font-weight 700
          color rgb(147,153,159)
      .firstbtn
        position absolute
        bottom 0
        right 0
        width 74px
        height 24px
        text-align center
        line-height 24px
        border-radius 12px
        background rgb(0,160,220)
        color #ffffff
        font-size 10px
    .box
      height 16px
      width 100%
      background #f3f5f7
      border-top 1px solid rgba(7,17,27,0.1)
      border-bottom 1px solid rgba(7,17,27,0.1)
    .info
      margin 18px
      .name
        font-size 16px
        color #000000
      .txt
        padding 6px 8px 0 8px
        font-size 12px
        font-weight 200
        color rgb(77,85,93)
        line-height 24px
    .evaluation
      margin 18px 18px 0 18px
      .name
        font-size 16px
        color #000000
    .eva-list
      padding 16px 0
      border-top 1px solid rgba(7,17,27,0.1)
      .list
        margin 16px
        borderbotton(rgba(7,17,27,0.1))
        .top
          display flex
          margin-bottom 6px
          .time
            font-size 10px
            color rgb(147,153,159)
            line-height 12px
            flex 1
          .name
            font-size 10px
            color rgb(147,153,159)
            line-height 12px
            margin-right 6px
          .img
            width 12px
            height 12px
            border-radius 50%
        .center
          display flex
          align-items center
          padding-bottom 16px
          .iconfont
            font-size 12px
            color rgb(147,153,159)
            line-height 24px
            margin-right 4px
            &.icon-dianzan
              color rgb(0,160,220)
          .txt
            font-size 12px
            color rgb(7,17,27)
            line-height 16px
</style>

<template>
  <div class="food">
    <div class="foodin">
      <a class="iconfont icon-huitui" @click="Tochange"></a>
      <img class="img" :src="food.image" />
      <div class="title">
        <h2 class="name">{{food.name}}</h2>
        <p class="rating"><span>月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span></p>
        <p class="price"><span class="new">￥{{food.price}}</span><span v-show="food.oldPrice" class="old">￥{{food.oldPrice}}</span></p>
        <div v-if="!food.num" class="firstbtn" @click="firstbtn">加入购物车</div>
        <addbtn v-else :food="food"></addbtn>
      </div>
      <div class="box"></div>
      <div class="info">
        <h2 class="name">商品介绍</h2>
        <p class="txt">{{food.info}}</p>
      </div>
      <div class="box"></div>
      <div class="evaluation">
        <h2 class="name">商品评价</h2>
        <myeva :ratings="food.ratings" :isactive="isactive" :isimg="isimg" v-on:change="change" class="main"></myeva>
      </div>
      <div class="eva-list">
        <ul>
          <li class="list" :key="index" v-for="(rating,index) in ratings">
            <div class="top">
              <p class="time">{{rating.rateTime}}</p>
              <p class="name">{{rating.username}}</p>
              <img :src="rating.avatar" class="img">
            </div>
            <div class="center">
              <span class="iconfont" :class="rating.rateType ? 'icon-cai' : 'icon-dianzan'"></span>
              <span class="txt">{{rating.text}}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <Car :seller="seller" :goods="goods" class="car"></Car>
  </div>
</template>

<script>
import myeva from '@/components/myeva.vue'
import Car from '../components/car'
import addbtn from '@/components/addbtn.vue'
export default {
  data () {
    return {
      food:{},
      isimg:true,
      isactive:2,
      seller:{},
      goods:[]
    }
  },
  components:{
    'myeva':myeva,
    'Car':Car,
    addbtn
  },
  created () {
    this.food = this.$route.params.food
    this.seller = this.$route.params.seller
    this.goods = this.$route.params.goods
  },
  computed:{
    ratings () {
      let self = this
      return this.food.ratings.filter(function(val){
        let isOK = true
        if(self.isactive == 2 && val.rateType != 0) {
          isOK = false
        }else if(self.isactive == 3 && val.rateType != 1) {
          isOK = false
        }
        if(self.isimg && !val.text) {
          isOK = false
        }
        if(isOK) {
          return val
        }
      })
    }
  },
  methods: {
    change(val) {
      if(typeof val == 'boolean') {
        this.isimg = !this.isimg
      }else{
        this.isactive = val
      }
    },
    firstbtn() {
      this.food.num ? this.food.num++ : this.$set(this.food,'num',1)
    },
    Tochange() {
      this.$router.push({
        name: 'good',
        params: {
          goods: this.goods
        }
      })
    }
  }
}
</script>
